<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 先引入vue.js -->
    <script src="./vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 引入组件库 -->
    <script src="./index.js"></script>
    <!--axios-->
    <!-- <script src="./message-box.js"></script> -->
    <script src="./axios.min.js"></script>
    <style>
        .login-container {
            border-radius: 15px;
            background-clip: padding-box;
            margin: 180px auto;
            width: 350px;
            padding: 35px 35px 15px 35px;
            background: #fff;
            border: 1px solid #eaeaea;
            box-shadow: 0 0 25px #cac6c6;
        }

        .login_title {
            margin: 0px auto 40px auto;
            text-align: center;
            color: #505458;
        }
    </style>
</head>

<body>
    <div id="app">
        <template>
            <el-form status-icon label-width="100px" class="login-container">
                <h3 class="login_title">
                    <el-button type="text" style="margin-left: 20px">{{title}}</el-button>
                </h3>
                <div style="margin-right: 70px">
                    <el-form-item label="账号" prop="username">
                        <el-input type="text" v-model="ruleForm.username" autocomplete="on"></el-input>
                    </el-form-item>
                </div>
                <div style="margin-right: 70px">
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary" @keydown.enter.native="login" @click="login" style="margin-left: 46px">登录
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
    </div>

    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    title: "小正青年后台管理系统",
                    ruleForm: {
                        password: '',
                        username: ''
                    },
                };
            },
            methods: {
                keyupSubmit() {
                    document.onkeydown = e => {
                        console.log(e);
                        console.log(e.keyCode);
                        var e=event||e;
                        // let _key = window.event.keyCode;
                        if ( e.keyCode===13) {
                            this.login()
                        }
                    }
                },
                login: function () {
                    var that=this;
                    axios.post("https://www.xiaozheng8.com/admin/login", {
                            username: this.ruleForm.username,
                            password: this.ruleForm.password
                        })
                        .then(data => {
                            if (data.data.code === 200) {
                                sessionStorage.setItem("isLogin", "true")
                                window.location.href = './home.html';
                            } else {
                                sessionStorage.setItem("isLogin", "false")
                                that.$alert('账号或密码错误', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {

                                    }
                                });
                            }
                        }).catch(function () {
                            sessionStorage.setItem("isLogin", "false")
                            that.$alert('账号或密码错误', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {

                                }
                            });
                        });
                },

            },created() {
                this.keyupSubmit()
            },
        })
    </script>
</body>

</html>